<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="jquery-3.6.4.min.js"></script>
    <!-- 引入 echarts.js -->
    <script src="echarts.min.js"></script>
</head>
<body background="./背景2.jpg">
    
    <!-- 为ECharts准备一个具备大小（宽高）的Dom -->
    <div id="main" style="width: 1500px;height:500px;"></div>
    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main')); 
        var names=[],sals=[],alls=[],comms=[];
        var tom=100;

       const symbolpath  ={path:'M512 938.666667a341.333333 341.333333 0 0 0 341.333333-341.333334q0-188.501333-341.333333-512-341.333333 323.498667-341.333333 512a341.333333 341.333333 0 0 0 341.333333 341.333334z m0-734.293334q256 256 256 392.96 0 106.026667-74.965333 181.034667Q618.026667 853.333333 512 853.333333q-106.026667 0-181.034667-74.965333Q256 703.36 256 597.333333q0-136.96 256-392.96zM426.666667 597.333333a42.666667 42.666667 0 1 0-85.333334 0 170.666667 170.666667 0 0 0 170.666667 170.666667 42.666667 42.666667 0 1 0 0-85.333333 85.333333 85.333333 0 0 1-85.333333-85.333334z' };
        //图像的样式（矢量）
        
        
        
        const bodyMax = 100;
        const labelSetting = {
  show: true,
  position: 'top',
  offset: [0, -20],
  formatter: function (param) {
    return ((param.value / bodyMax) * 100).toFixed(0) + '%';
  },
  fontSize: 18,
  fontFamily: 'Arial'
};const markLineSetting = {
  symbol: 'none',
  lineStyle: {
    opacity: 0.3
  },
  data: [
    { 
      
      type: 'max',
      label: {
        style:"font size:300px",
        formatter: 'max: {c}'
      }
    },
    {
      type: 'min',
      label: {
        formatter: 'min: {c}'
      }
    }
  ]
};



        // 指定图表的配置项和数据
        function TestAjax(){
            $.ajax({
                type:"get",
                data:{},
                dataType:'json',
                url:"http://localhost/laji/laji1.php",
                async:false,
                success:function(result){
                    if(result){
                        for(var i=0;i<result.length;i++){
                            names.push(result[i].name);
                            sals.push(result[i].sal);
                            comms.push(result[i].comm);
                            console.log(names);
                            console.log(sals);
                            console.log(comms);
                        }
                    }
                }
            })
            return names,sals,comms;
        };
        TestAjax();
        var option={
            title:{

            },
            xAxis:{
              axisLabel: {//x轴文字的配置
                show: true,
                textStyle: {
                    color: "#FFFF00",
                    fontSize:30
                }
            },

                data:names,
            },
            yAxis:{
              axisLabel: {//x轴文字的配置
                show: true,
                textStyle: {
                    color: "#000000",
                    fontSize:30
                }
            },
            },
            grid: {
    top: 'center',
    height: 230
  },
            series:[
                {
                    symbolBoundingData:tom,
                    animationDuration: 0,
                    label: labelSetting,
                    type:'pictorialBar',
                    data:sals,
                    symbolClip: true,
                    symbol:symbolpath.path,
                    markLine: markLineSetting,
                    },
                    {
      name: 'full',
      type: 'pictorialBar',
      symbolBoundingData:tom,
      animationDuration: 0,
      z:1,
      itemStyle: {
        color: '#ccc'
      },
      data: [
        {
          value: 1,
          symbol: symbolpath.path
        },
        {
          value: 1,
          symbol: symbolpath.path
        },
        {
          value: 1,
          symbol: symbolpath.path
        },
        {
          value: 1,
          symbol: symbolpath.path
        },
        {
          value: 1,
          symbol: symbolpath.path
        },
        {
          value: 1,
          symbol: symbolpath.path
        }
      ]
    }


            
        ]
        };
        
        // 使用刚指定的配置项和数据显示图表。
        myChart.setOption(option);
    </script>
</body>
</html>
